require('../css/info.css');

// 视频播放页
document.ready(function () {

    // 跨页面传值 sessionStorage(会话级存储)
    let videoList = JSON.parse(sessionStorage.getItem('videoList'));
    console.log(videoList);


    const URL = 'http://139.9.177.51:8099';   //全局常量

    // 获取dom
    let video = document.querySelector('video');
    let numOne = document.querySelector('.numOne');  //当前视频页数
    let numTwo = document.querySelector('.numTwo'); //视频总数
    let backBtn = document.querySelector('#back'); //上一个
    let nextBtn = document.querySelector('#next'); //下一个
    let msg = document.querySelector('.msg');      //视频介绍
    let mantleTitle = document.querySelector('.mantleTitle');

    let index = 0;  //全局变量 当前正在播放的视频
    // 替换页面的值
    // 函数调用重复代码
    apply();



    // 点击下一个视频按钮
    nextBtn.addEventListener('click', function () {
        // 如果到了最后一个视频 提醒用户
        if (index + 1 === videoList.length) {
            utils.createToast(0, '后面已经没有咯');
        } else {
            index++;
            apply();
        }
    })

    // 点击上一个视频按钮
    backBtn.addEventListener('click', function () {
        // 视频索引不能小于0 提醒用户
        if (index - 1 < 0) {
            utils.createToast(0, '已经是第一个视频咯')
        } else {
            index--;
            apply();
        }
    })


    // 封装一个函数 渲染页面
    function apply() {
        // 函数重新渲染
        video.src = URL + videoList[index].videoUrl;
        msg.innerText = videoList[index].title;
        numOne.innerText = index + 1;
        numTwo.innerText = videoList.length;
        mantleTitle.innerText=videoList[index].title;
    }




    //  点击暂停按钮    显示蒙层
    let stopBtn = document.querySelector('#stop');  //暂停按钮
    let mantle = document.querySelector('.mantle');  //蒙层
    let mantleImg = document.querySelector('.mantleImg img');
    let startBtn = document.querySelector('.start'); //继续播放
    let outBtn = document.querySelector('.out');     //结束播放
    let bofang = document.querySelector('.bofang');

    // 暂停按钮
    stopBtn.addEventListener('click', function () {
        // 点击暂停按钮  视频暂停播放+显示蒙层   
        video.pause();
        mantle.style.display = 'block';
        // 更换蒙层中的图片
        mantleImg.src = URL + videoList[index].imgUrl;
        // 隐藏返回箭头按钮
        fanHuiBtn.style.display = 'none';
        bofang.className = 'bofang iconfont icon-bofang2';
    })




    // 点击继续播放按钮 
    startBtn.addEventListener('click', function () {
        mantle.style.display = 'none';
        video.play();
        fanHuiBtn.style.display = 'block';
        bofang.className = 'bofang iconfont icon-ai07';
    })

    //  点击结束播放按钮   跳转到课程训练页
    outBtn.addEventListener('click', function () {
        //第一种页面跳转
        // location.href = "./practice.html";
        // 第二种回退到 上一页 
        history.back();
    })



    // 视频自动切换 事件
    video.addEventListener('ended', function () {
        // 一个视频播放完成后 ended事件自动播放下一个视频
        // 如果到了最后一个视频 提醒用户
        if (index + 1 === videoList.length) {
            utils.createToast(0, '后面已经没有咯');
        } else {
            index++;
            apply();
        }
    })



    // 视频进度条--------




    // 返回箭头
    let fanHuiBtn = document.querySelector('#fanHui');
    fanHuiBtn.addEventListener('click', function () {
        // 返回上一层
        history.back();
    })





})